<template>
  <div class="w-full">
    <a-select allowClear v-model="modalValue" v-if="mode === 'radio'" :options="list" @change="onChange">
    </a-select>
    <a-radio-group v-else v-model="modalValue" :options="list" @change="onChange"></a-radio-group>
  </div>
</template>

<script setup lang="ts">
import { themeCategoryTree } from "@/api/service/theme/theme";
import { ENUM_DATA_SCOPE } from "@/enum/system.enum";

const emit = defineEmits(["change"]);
const modalValue = defineModel<string>();

withDefaults(
  defineProps<{
    mode?: "radio" | "select";
  }>(),
  {
    mode: "radio"
  }
);
const list = ref<any[]>([]);
const onChange = () => {
  emit("change");
};
const getData = async () => {
  if (list.value.length > 0) return;
  const data = await themeCategoryTree(ENUM_DATA_SCOPE.PARENT_SHARED);
  list.value = data.data?.map((v: any) => {
    return {
      label: v.label,
      value: v.label
    };
  });
};
onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped></style>
